<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- <ul>
            <li v-for="(item,index) in list" :key="index">
                <span>
                    {{item}}
                </span>
            </li>
        </ul> -->

        <!-- <ul>
            <li v-for="(item,index) in list2" :key="id">
                <p>{{item.title}}</p>
                <img :src="item.img" alt="">
                <p>{{item.cmtcount}}</p>
                <p>{{item.source}}</p>
            </li>
        </ul>  -->

        <input type="text" v-model="pname" placeholder="请输入你想要查询的省份">
        <ul>
            <li v-for="(item,index) in list1" :key="index">
                <span>
                    {{item}}
                </span>
            </li>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        // axios({
        //     url: 'http://hmajax.itheima.net/api/province'
        // }).then(res => {
        //     console.log(res.data.list);
        // })
        const { createApp } = Vue
        createApp({
            data() {
                return {
                    list: [],
                    list1: [],
                    list2: [],
                    pname: '江西省',
                }
            },
            async created() {
                // const res = await axios.get('http://hmajax.itheima.net/api/province')
                // console.log(res.data.list);
                // this.list = res.data.list;
                // 页面加载时，获取初始省份的城市列表
                try {
                    const res = await axios.get('http://hmajax.itheima.net/api/city', {
                        params: {
                            pname: this.pname
                        }
                    });
                    console.log(res.data.list);
                    this.list1 = res.data.list;
                } catch (error) {
                    console.error('请求出错:', error);
                }
                // const res2 = await axios.get('http://hmajax.itheima.net/api/news')
                // this.list2 = res2.data.data;
                // console.log(res2.data.data);
            },
            watch: {
                pname: {
                    immediate: true, // 页面加载时立即触发一次
                    handler(newVal) {
                        // 当 pname 改变时，发送新的请求
                        axios({
                            url: 'http://hmajax.itheima.net/api/city',
                            params: {
                                pname: newVal
                            }
                        }).then(res => {
                            console.log(res.data.list);
                            this.list1 = res.data.list;
                        }).catch(error => {
                            console.error('请求出错:', error);
                        });
                    }
                }
            },
            methods: {

            },

        }).mount('#app')
    </script>
</body>

</html>